<template>
  <div class="abnormal-log-list">
    <!-- 查询表单 -->
    <el-form class="demo-form-inline" ref="formRef" :model="queryForm" label-width="100px" size="small" inline>
      <el-form-item label="规则名称" prop="ruleName">
        <el-input v-model="queryForm.ruleName" placeholder="规则名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="监测条件" prop="detectionCondition">
        <el-select v-model="queryForm.detectionCondition" placeholder="请选择监测条件" clearable>
          <el-option label="条件A" value="conditionA"></el-option>
          <el-option label="条件B" value="conditionB"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围" prop="timeRange">
        <el-date-picker
          v-model="queryForm.timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchLogs">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="resetData">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 异常日志列表 -->
    <el-table
      :data="tableData"
      height="100%"
      style="width: 100%; "
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="timestamp" label="时间戳" width="180"></el-table-column>
      <el-table-column prop="ruleName" label="规则名称"></el-table-column>
      <el-table-column prop="detectionCondition" label="监测条件"></el-table-column>
      <el-table-column prop="threshold" label="阈值"></el-table-column>
      <el-table-column prop="value" label="触发值"></el-table-column>
      <el-table-column prop="details" label="详细信息"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="viewLog(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      style="text-align: right"
    ></el-pagination>

    <!-- 日志详情对话框 -->
    <el-dialog title="异常日志详情" :visible.sync="detailVisible" width="60%">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="ID">{{ selectedLog.id }}</el-descriptions-item>
        <el-descriptions-item label="时间戳">{{ selectedLog.timestamp }}</el-descriptions-item>
        <el-descriptions-item label="规则名称">{{ selectedLog.ruleName }}</el-descriptions-item>
        <el-descriptions-item label="监测条件">{{ selectedLog.detectionCondition }}</el-descriptions-item>
        <el-descriptions-item label="阈值">{{ selectedLog.threshold }}</el-descriptions-item>
        <el-descriptions-item label="触发值">{{ selectedLog.value }}</el-descriptions-item>
        <el-descriptions-item label="详细信息">{{ selectedLog.details }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AbnormalLogList",
  data() {
    return {
      queryForm: {
        ruleName: "",
        detectionCondition: "",
        timeRange: []
      },
      totalTableData: [
        // 示例数据
        { id: 1, timestamp: '2023-10-01 10:00:00', ruleName: '规则A', detectionCondition: 'conditionA', threshold: 50, value: 55, details: '超过阈值50' },
        { id: 2, timestamp: '2023-10-01 11:00:00', ruleName: '规则B', detectionCondition: 'conditionB', threshold: 75, value: 80, details: '超过阈值75' }
      ],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      detailVisible: false,
      selectedLog: {}
    };
  },
  methods: {
    fetchLogs() {
      this.loading = true;
      setTimeout(() => {
        const { ruleName, detectionCondition, timeRange } = this.queryForm;
        let filteredData = this.totalTableData;

        if (ruleName) {
          filteredData = filteredData.filter(item => item.ruleName.includes(ruleName));
        }

        if (detectionCondition) {
          filteredData = filteredData.filter(item => item.detectionCondition === detectionCondition);
        }

        if (timeRange && timeRange.length === 2) {
          const [startDate, endDate] = timeRange;
          filteredData = filteredData.filter(item => {
            const logDate = new Date(item.timestamp).getTime();
            const startTimestamp = new Date(startDate).getTime();
            const endTimestamp = new Date(endDate).getTime();
            return logDate >= startTimestamp && logDate <= endTimestamp;
          });
        }

        this.total = filteredData.length;
        this.tableData = filteredData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
        this.loading = false;
      }, 1000);
    },
    resetData() {
      this.$refs.formRef.resetFields();
      this.fetchLogs();
    },
    viewLog(row) {
      this.selectedLog = row;
      this.detailVisible = true;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchLogs();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchLogs();
    }
  },
  mounted() {
    this.fetchLogs();
  }
};
</script>

<style scoped lang="scss">
.abnormal-log-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;

  .el-row {
    margin-bottom: 20px;
  }

  .el-table {
    flex: 1;
    margin-bottom: 20px;
  }
}
</style>
